Thumb

CRUD(Create, Read, Update, Delete) Operations in MVC using entity framework


11/27/2016 12:00:00 AM

 

MVC CRUD(Create, Read, Update, Delete)

step : 1 Open My SQL Server and Create new database like as video

Create database Login;
create table LoginPanel(
  ID int not null primary key
  Username nvarchar(50) null
  Password nvarchar(50) null
);

Step : 2

  • Open Visual studio
  • Click on “File”>New>Project>Visual c#>Web> then provide your project name> then select “ok”> then click “MVC”>ok.
  • delete default controller and view
  • Create new controller name “Register”

Step : 3 Add view and write this code in your view (for input data from user)

      SetDataInDataBase.cshtml

@model WebApplication.Models.LoginPanel
@using (Html.BeginForm())
{
    <div class="container">
    <div class="form-group">
        <label>Username:</label>
        <input class="form-control" name="Username" placeholder="Enter Name" />
    </div>
    <div class="form-group">
        <label>Password:</label>
        <input class="form-control" name="Password" placeholder="Enter Password" />
    </div>
    <div class="button">
        <button>Submit</button>
    </div>
</div>
}

  step : 4 change your defaults Routeconfig like as video.

defaults: new {controller = "Register", action = "SetDataInDataBase", id = UrlParameter.Optional }

step : 5 Connect your database using entity framework like as video.

setp : 6 add this code in your controller (for set data in database)

       RegisterController.cs 

public class RegisterController : Controller
	{
		TofaelAhmedEntities db = new TofaelAhmedEntities();
		// GET: /Register/
		public ActionResult SetDataInDataBase()
		{
			return View();
		}
		[HttpPost]
		public ActionResult SetDataInDataBase(LoginPanel model)
		{
			LoginPanel tbl = new LoginPanel();
			tbl.Username = model.Username;
			tbl.Password = model.Password;
			db.LoginPanels.Add(tbl);
			db.SaveChanges();
			return View();
		}
    }

Step : 7  Add method in your controller  for (pass the database record view for user) 

public ActionResult ShowDataBaseForUser()
		{
			var item = db.LoginPanels.ToList();
			return View(item);
		}

Step : 8 Add view and write this code in your view (show data for user from database)

ShowDataBaseForUser.cshtml

@model List<WebApplication.Models.LoginPanel>
    <div class="container">
        <table class="table table-bordered" >
            <thead>
                <tr>
                    <th>Username</th>
                    <th>Password</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @for (int i = 0; i < Model.Count(); i++)
                {
                    <tr>
                        <td>@Model[i].Username</td>
                        <td>@Model[i].Password</td>
                        <td>
                            <a href="@Url.Action("Delete", new { id = Model[i].ID})"><i class="glyphicon glyphicon-trash"></i></a>
                            <a href="@Url.Action("Edit", new { id = Model[i].ID})"><i class="glyphicon glyphicon-edit"></i></a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>

Step : 9 Add a  new method in your controller  (for delete data from your database)

public ActionResult Delete(int id)
		{
			var item = db.LoginPanels.FirstOrDefault(x => x.ID == id);
            if(item != null)
            {
			  db.LoginPanels.Remove(item);
			  db.SaveChanges();
            }

			var item2 = db.LoginPanels.ToList();
			return View("ShowDataBaseForUser", item2);
		}

Step : 10 Add a  new method in your controller  (for edit data from your database)

public ActionResult Edit(int id)
		{
			var item = db.LoginPanels.Where(x => x.ID == id).First();
			return View(item);
		}
		[HttpPost]
		public ActionResult Edit(LoginPanel model)
		{
			var item = db.LoginPanels.Where(x => x.ID == model.ID).First();
			item.Username = model.Username;
			item.Password = model.Password;
			db.SaveChanges();
			var item2 = db.LoginPanels.ToList();
			return View("ShowDataBaseForUser", item2);
		}

Step : 11 Add a view  (for show edit panel with data)

@model WebApplication.Models.LoginPanel
@using (Html.BeginForm())
{
    <div class="container">
        <div class="form-group">
            <label>Username:</label>
            @Html.TextBoxFor(x => x.Username, new { @class = "form-control" })
        </div>
        <div class="form-group">
            <label>Password:</label>
            @Html.TextBoxFor(x => x.Password, new { @class = "form-control" })

        </div>
        <div class="button">
         <button>Submit</button>
        </div>

    </div>
}

Now run this application

About Teacher

Reza Karim

Software Engineer

More about him